<template>
  <view class="container">
    <view class="mainBox">
      <view class="greetings">欢迎登录，国源公司智慧园区</view>
      <uni-forms
        ref="form"
        class="formBox"
        :modelValue="formData"
        :rules="rules"
      >
        <uni-forms-item name="account">
          <view class="uni-form-item itemBox">
            <image class="img" src="/static/image/login_user.png" />
            <uni-easyinput
              type="text"
              v-model="formData.account"
              placeholder="请输入您的帐号"
              :inputBorder="false"
            />
          </view>
        </uni-forms-item>
        <uni-forms-item name="password">
          <view class="uni-form-item itemBox">
            <image class="img" src="/static/image/login_pwd.png" />
            <uni-easyinput
              type="password"
              v-model="formData.password"
              placeholder="请输入密码"
              :inputBorder="false"
            />
          </view>
        </uni-forms-item>
        <!-- <uni-forms-item name="code">
          <view class="uni-form-item itemBox">
            <image class="img" src="/static/image/login_code.png" />
            <uni-easyinput
              v-model="formData.code"
              placeholder="请输入验证码"
              :inputBorder="false"
            />
            <image
              class="code"
              :src="`data:image/gif;base64,${codeImg}`"
              @click="getImgCode"
            />
          </view>
        </uni-forms-item> -->
      </uni-forms>

      <view class="btnBox">
        <view class="tip">
          <uni-icons
            type="info-filled"
            color="#F44698"
            size="16"
            v-show="showTip"
          ></uni-icons>
          <text v-show="showTip">账号或密码输入错误</text>
        </view>
        <button class="submit" type="primary" @click="formSubmit">登录</button>
      </view>
      <!-- <view class="toolBox">
                <view @click="onLocation('/pages/account/forgetPwd/index')">忘记密码?</view>
                <view class="line" />
                <view @click="onLocation('/pages/register/index')">注册账号</view>
            </view> -->
    </view>
    <!-- <view class="third">
            <view class="box">
                <text class="line" />
                <text class="text">第三方登录</text>
                <text class="line" />
            </view>
            <view class="wcLogin" @click="onLocation('/pages/login/wcLogin')">
                <uni-icons type="weixin" color="#fff" size="30"></uni-icons>
            </view>
        </view> -->
    <view class="footer">
      <!-- <view class="agreement">登录即代表已阅读并同意<text @click="onLocation('/pages/article/userAgreement')">《用户协议》</text></view> -->
    </view>
  </view>
</template>

<script>
import { login, getCode, getRoleMenu } from '@/api/index';
export default {
  data() {
    return {
      uuid: '',
      codeImg: '',
      // 提交错误提示
      showTip: false,
      // 表单数据
      formData: {
        account: uni.getStorageSync('userInfo').account || '',
        password: uni.getStorageSync('userInfo').password || '',
      },
      rules: {
        account: {
          rules: [
            {
              required: true,
              errorMessage: '请输入您的帐号',
            },
          ],
        },
        password: {
          rules: [
            {
              required: true,
              errorMessage: '请输入密码',
            },
          ],
        },
        // code: {
        //   rules: [
        //     {
        //       required: true,
        //       errorMessage: '请输入验证码',
        //     },
        //   ],
        // },
      },
    };
  },
  onLoad(query) {
    // 关闭调试
    // wx.setEnableDebug({
    //   enableDebug: false,
    // });
  },
  onShow() {
    this.getImgCode();
  },
  methods: {
    getImgCode() {
      getCode().then((res) => {
        this.uuid = res.data.uuid;
        this.codeImg = res.data.img;
      });
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
    // 提交
    formSubmit() {
      this.$refs['form']
        .validate()
        .then((res) => {
          uni.showLoading({
            title: '登录中',
          });
          login({
            code: res.code,
            uuid: this.uuid,
            username: res.account,
            password: res.password,
            tenantId: '000000',
            grantType: 'password',
            clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
          })
            .then(async (loginRes) => {
              // storage
              uni.setStorageSync('token', loginRes.data.access_token);
              uni.setStorageSync('clientid', loginRes.data.client_id);
              // menuInfo
              getRoleMenu().then((res) => {
                uni.setStorageSync('menu', res.data);
                // 提示并跳转
                uni.hideLoading();
                uni.showToast({
                  title: `登录成功`,
                  success: () => {
                    setTimeout(() => {
                      uni.reLaunch({
                        url: '/pages/index/index',
                      });
                    }, 1000);
                  },
                });
              });
            })
            .catch((err) => {
              this.getImgCode();
            });
        })
        .catch((err) => {
          console.log('err', err);
          // uni.showToast({
          //     icon: 'none',
          //     title: `密码或账号错误，请重新输入`,
          // })
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-top) - 128rpx);
  padding: 64rpx 36rpx;
  background-image: url('/static/image/login_bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
  .mainBox {
    margin: 280rpx 34rpx 0;
    background: #ffffff;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    .greetings {
      font-size: 40rpx;
      font-weight: 600;
      color: #1777fb;
      line-height: 47rpx;
      padding: 54rpx 0 40rpx;
    }
    :deep(.uni-forms) {
      padding: 0 40rpx;
    }
    .itemBox {
      width: calc(100% - 44rpx);
      padding: 15rpx 22rpx;
      border-radius: 4rpx;
      border: 2rpx solid #d9d9d9;
      background: #fff;
      display: flex;
      align-items: center;
      .img {
        width: 38rpx;
        height: 38rpx;
      }
      .code {
        width: 160rpx;
        height: 60rpx;
        border-radius: 5rpx;
        background: #e6e6e6;
      }
    }
    .btnBox {
      width: 80%;
      button {
        font-size: 36rpx;
        margin: 32rpx auto 54rpx;
        line-height: 90rpx;
        letter-spacing: 5rpx;
        box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.25);
        border-radius: 45rpx;
        &::after {
          border: none;
        }
      }
      .tip {
        height: 32rpx;
        color: #f2358e;
        font-size: 22rpx;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        text {
          padding-left: 20rpx;
        }
      }
      .submit {
        background: linear-gradient(83deg, #549df3 0%, #1876e9 88%);
      }
    }
    .toolBox {
      color: #888888;
      font-size: 24rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      view:first-child {
        color: #2d7ee0;
      }
      .line {
        height: 22rpx;
        border: 1rpx solid #c1c1c1;
        margin: 0 43rpx;
      }
    }
    ::v-deep .uni-forms-item__label {
      display: none;
    }
    ::v-deep .uni-forms-item__error {
      left: 55rpx;
    }
  }
}
.third {
  margin: 195rpx auto 84rpx;
  .box {
    margin-bottom: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .line {
      width: 24%;
      border: 3rpx solid #cfcdcd;
    }
    .text {
      color: #c1c1c1;
      font-size: 24rpx;
      font-weight: bold;
      padding: 0 30rpx;
    }
  }
  .wcLogin {
    width: 83rpx;
    height: 83rpx;
    color: #fff;
    margin: auto;
    background: #50b674;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 165rpx;
  .agreement {
    color: #888888;
    font-size: 24rpx;
    font-weight: bold;
    text-align: center;
    text {
      color: #2d7ee0;
    }
  }
}
</style>
